<template>
    <ul class="tool-bar">
        <li v-for="(item, index) in elevator_text" :key="index" :data-name="'section' + (index + 1)">
            <a>{{ item }}</a>
        </li>
    </ul>
</template>

<script setup>
import { onMounted, ref } from 'vue';
let elevator_text = ref([]);

onMounted(() => {
    // 电梯导航跳转区域DOM
    let elevator_block = document.querySelectorAll('.middle-title');
    // 电梯导航跳转区域数量
    let block_length = elevator_block.length;
    // 生成的电梯导航标签DOM
    let eList_block = document.querySelector('.tool-bar');

    elevator_text.value = getElevatorText(elevator_block, block_length);
    addSection(elevator_block);

    eList_block.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            const n = document.querySelector('.tool-bar > li[class="active"]');
            if (n) {
                n.classList.remove('active');
            }
            e.target.parentNode.classList.add('active');
            console.log(e.target.parentNode.dataset.name);
            const top = document.querySelector(`#${e.target.parentNode.dataset.name}`).offsetTop;
            console.log(top);
            document.documentElement.scrollTop = top;
        }
    });
    // 监听窗口滚动事件
    window.addEventListener('scroll', function () {
        // 获取滚动条的位置
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        elevator_block.forEach(function (item) {
            // 获取内容区块的位置信息
            const offsetTop = item.offsetTop;
            const offsetHeight = item.offsetHeight;
            if (scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight) {
                const n = document.querySelector('.tool-bar > li[class="active"]');
                if (n) {
                    n.classList.remove('active');
                }
                let now = item.getAttribute('id');
                const now_section = document.querySelector(`[data-name=${now}]`);
                now_section.classList.add('active');
            }
        });
    });
});
/**
 * @description:获取所有中间部分标题
 * @return {List}
 */
const getElevatorText = (dom, length) => {
    let text_list = [];
    for (let i = 0; i < length; i++) {
        text_list.push(dom[i].innerText);
    }
    return text_list;
};

/**
 * @description:给电梯导航跳转区域添加Section
 */
const addSection = dom => {
    console.log('add section');
    console.log(dom);
    dom.forEach((item, index) => {
        item.setAttribute('id', 'section' + parseInt(index + 1));
    });
};
</script>

<style lang="scss">
.tool-bar {
    position: fixed;
    right: 30px;
    bottom: 267px;
    li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-bottom: 1px solid #f1f1f1;
        a {
            font-size: 14px;
            width: 2em;
            text-align: center;
        }
    }
    li:hover {
        background-color: #1f528a;
        a {
            color: #fff;
            cursor: pointer;
        }
    }
    .active {
        background-color: #1f528a;
        a {
            color: #fff;
        }
    }
}
</style>
